<!--
	created by: Moses Chan
	created on: 08-11-12
-->

<!DOCTYPE html>

<html>

<head>
	<title>Travel Experts - Registration</title>
	<link rel="stylesheet" type="text/css" href="format.css" />

	
	<script type="text/JavaScript">
	
		/*********************************
			
		function to validate user input for entry into Customers database table.
		
		if non-valid data is found, a third cell is created with a warning label
			and function returns false to abort submit of data to server.
		else true is returned and form is ready to be submitted to server.

		**********************************/
			
		function validateCusInfo(theForm){
			//get the table holding the forms
			var cusForm = document.getElementById("cusFormTable");
			
			//don't want to iterate over the 2 hidden inputs, submit/reset buttons,
			//hence length-4
			//also since there are hidden forms (to hold which input forms are valid)
			//we will start at 1 and increment counter by 2
			for(var i=1; i<(document.cusInfo.length -4); i+=2) {
			
				//index into row of table check for a 3rd cell in row
				//if 3rd cell exists already, then clear the contents
				var k = Math.floor(i/2);
				if(cusForm.rows[k].cells.length == 3) {
					var warningCell = cusForm.rows[k].cells[2];
					warningCell.innerHTML = "";
					
					}
				//else make the 3rd cell
				else {var warningCell = cusForm.rows[k].insertCell(-1);}
				

				//put warning message in 3rd cell if field is empty
				if((document.cusInfo.elements[i].value == "") || 
						(/^\s+$/.test(document.cusInfo.elements[i].value))) {
					
					//let's not make business phone a requirement and give it a "" value
					if(document.cusInfo.elements[i].name == "CustBusPhone") {
						document.cusInfo.elements[i-1].value = "t";
						document.cusInfo.elements[i].value = "";
						}
					else {
						warningCell.innerHTML = "<div style='color:red;font-weight:900'>"+
													"MISSING</div>";
						}
					}
				//next check for valid data				
				else if((document.cusInfo.elements[i].name == "CustHomePhone") ||
							document.cusInfo.elements[i].name == "CustBusPhone") {
					//pattern for phone numbers in format (xxx) xxx-xxxx or (xxx)xxx-xxxx
					var phone = /^\({1}[2-9]\d{2}\){1}\s?\d{3}\-\d{4}$/;
					var phoneValid = phone.test(document.cusInfo.elements[i].value);
					if(!phoneValid) {
						warningCell.innerHTML = "<div style='color:red;font-weight:900'>"+
													"(XXX) XXX-XXXX or (XXX)XXX-XXXX</div>";
						}
					else {document.cusInfo.elements[i-1].value = "t";}
					}
				
				else if(document.cusInfo.elements[i].name == "CustEmail") {
					//check for valid email format
					//does not check to see if email is actually valid
					var email = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/i;
					var emailValid = email.test(document.cusInfo.elements[i].value);
					if(!emailValid) {
						warningCell.innerHTML = "<div style='color:red;font-weight:900'>"+
													"INVALID</div>";
						}
					else {document.cusInfo.elements[i-1].value = "t";}
					}
				
				else if(document.cusInfo.elements[i].name == "prov") {
					document.cusInfo.elements[i-1].value = "t";
					document.cusInfo.CustProv.value = document.cusInfo.prov.value;
					//move the selected province to an input tag that is captured in $_POST
					}
					
				else if(document.cusInfo.elements[i].name == "CustPostal") {
					//matcher for generic pattern for Canadian postal code (A1A 1A1 or A1A1A1)
					//does not check for validity
					var postPtrn = /^[a-z]\d[a-z]\s?\d[a-z]\d$/i;
					var postValid = postPtrn.test(document.cusInfo.elements[i].value);
					if(!postValid) {
						warningCell.innerHTML = "<div style='color:red;font-weight:900'>"+
													"A1A 1A1 or A1A1A1</div>";
						}
					else {document.cusInfo.elements[i-1].value = "t";}
					}
					
				else if(document.cusInfo.elements[i].name == "pwd2") {
					if(document.cusInfo.pwd1.value != document.cusInfo.pwd2.value) {
						warningCell.innerHTML = "<div style='color:red;font-weight:900'>"+
													"Passwords do not match</div>";
						}
					else {document.cusInfo.elements[i-1].value = "t";}
					}
				
				//else change data validity flag to "t" 
				//for non-empty fields that don't require sanitizing
				else {document.cusInfo.elements[i-1].value = "t";}
				}
				
			//now check to see if all data is valid to return true
			for(var i=0; i<(document.cusInfo.length -5); i+=2) {
				//if false is found, then focus on invalid field
				//and break loop by returning false
				if(document.cusInfo.elements[i].value == "f") {
					document.cusInfo.elements[i+1].focus();
					document.cusInfo.infoValid.value = "f";
					return false;
					}
				else {document.cusInfo.infoValid.value = "t";}
				}
				
			if(document.cusInfo.infoValid.value == "t") {return true;}
			}
	</script>
	
</head>

<body>
	
	<form name="cusInfo" action="custentry.php" method="post">
	
	<!-- input names are named after row names of table 'Customers' in 'TravelExperts' database -->
	<table id="cusFormTable">
		<tr>
			<!--hidden field used as a flag for validity of data-->
			<td>First name:<input type="hidden" name="validFName" value="f"></td>
			<td><input class="rightAlgn" type="text" maxlength="25" name="CustFirstName"></td>
		</tr>
		<tr>
			<td>Last name:<input type="hidden" name="validLName" value="f"></td>
			<td><input class="rightAlgn" type="text" maxlength="25" name="CustLastName"></td>
		</tr>
		<tr>
			<td>Street Address:<input type="hidden" name="validAddr" value="f"></td>
			<td><input class="rightAlgn" type="text" maxlength="75" name="CustAddress"></td>
		</tr>
		<tr>
			<td>City:<input type="hidden" name="validCity" value="f"></td>
			<td><input class="rightAlgn" type="text" maxlength="50" name="CustCity"></td>
		</tr>
		<tr>
			<td>Province:<input type="hidden" name="validProv" value="f"></td>
			<td class="rightAlgn"><select id="prov">
					<option></option>
					<option>AB</option>
					<option>BC</option>
					<option>MB</option>
					<option>NB</option>
					<option>NL</option>
					<option>NS</option>
					<option>NT</option>
					<option>NU</option>
					<option>ON</option>
					<option>PE</option>
					<option>QC</option>
					<option>SK</option>
					<option>YT</option>
			</select></td>
		</tr>
		<tr>
			<td>Postal code:<input type="hidden" name="validPost" value="f"></td>
			<td><input class="rightAlgn" type="text" name="CustPostal"></td>
		</tr>
		<tr>
			<td>Country:<input type="hidden" name="validCntry" value="f"></td>
			<td><input class="rightAlgn" type="text" name="CustCountry"></td>
		</tr>
		<tr>
			<td>Home phone:<input type="hidden" name="validHPhone" value="f"></td>
			<td><input class="rightAlgn" type="text" name="CustHomePhone"></td>
		</tr>
		<tr>
			<td>Business phone:<input type="hidden" name="validBPhone" value="f"></td>
			<td><input class="rightAlgn" type="text" name="CustBusPhone"></td>
		</tr>
		<tr>
			<td>Email:<input type="hidden" name="validEmail" value="f"></td>
			<td><input class="rightAlgn" type="text" name="CustEmail"></td>
		</tr>
		<tr>
			<td>Password:<input type="hidden" name="validPass1" value="f"></td>
			<td><input class="rightAlgn" type="password" name="pwd1"></td>
		</tr>
		<tr>
			<td>Confirm Password:<input type="hidden" name="validPass2" value="f"></td>
			<td><input class="rightAlgn" type="password" name="pwd2"></td>
		</tr>
		<tr>
			<td colspan="2" class="center">
				<input type="submit" value="Submit" onClick="return validateCusInfo(this);">
				<input type="reset" value="Reset" onClick="return confirm('You will lose all changes.\nContinue?')">
				<!--to-do: write a function to handle onClick for 'reset' to reset any 
							warning messages that may be present from previous attempts
				-->
			</td>
		</tr>
		
	</table>
	<input type="hidden" name="infoValid" value="f">
	<input type="hidden" name="CustProv" value="">
	</form>
	
</body>
</html>